﻿@if (UseCustomLayout)
{
    <CascadingValue Value="this">
        @Content
    </CascadingValue>
}
else
{
<style>
    #_@(Id.ToString("N")).blazored-modal-fade-in {
        animation: @AnimationDuration ease-out 0s ModalFadeIn;
    }

    #_@(Id.ToString("N")).blazored-modal-fade-out {
        animation: @AnimationDuration ease-out 0s ModalFadeOut;
        opacity: 0;
    }

    @@keyframes ModalFadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @@keyframes ModalFadeOut {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
</style>

    <div class="blazored-modal-container @Position" @ref="_modalReference">

        <div class="blazored-modal-overlay @OverlayCustomClass" @onclick="HandleBackgroundClick"></div>

        <div id="_@Id.ToString("N")" class="@Class" role="dialog" aria-modal="true" >
            @if (!HideHeader)
            {
                <div class="blazored-modal-header">
                    <h3 class="blazored-modal-title">@Title</h3>
                    @if (!HideCloseButton)
                    {
                        <button type="button" class="blazored-modal-close" aria-label="close" @onclick="CancelAsync" @attributes="@_closeBtnAttributes"> 
                            <span>&times;</span>
                        </button>
                    }
                </div>
            }
            <div class="blazored-modal-content">
                <CascadingValue Value="this">
                    @Content
                </CascadingValue>
            </div>
        </div>
    </div>
}

